<template>
	<view class="container search-container">
		<view class="index-top">
			<view class="index-search">
				<searchVue :isFocus="true" @clickSearch="search" :placeholder="'请输入商品或商家名称'" />
			</view>
		</view>
		<view class="search-panel">
			<view class="list-title">热门搜索</view>
			<view style="padding:20rpx;">
				<view class="search-list" @click="jump('/pages/category/goodsList?keyword=' + item.name)"
					v-for="item in hotList" :key="item.id">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import searchVue from '@/components/search.vue';
	import { hideLoading, showLoading, showToast } from '../../common/util';
	import api from '../../common/api';
	const inputRef = ref(null)
	const search = (key : string) => {
		if(key===''){
			showToast('请输入您要搜索的关键字')
			return
		}
		jump('/pages/category/goodsList?keyword=' + key)
	}
	const jump = (url) => {
		uni.navigateTo({ url })
	}
	onMounted(async () => {
		getPageList()
	})
	const hotList = ref([])
	const getPageList = async () => {
		showLoading()
		try {
			const res = await api.findHotWord()
			hotList.value = res.data || []
		} finally {

			hideLoading()
		}
	}
</script>

<style lang="scss">
	.search-container {
		padding: 20rpx;

		.search-panel {
			padding: 20rpx 0;
		}

		.list-title {
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
		}

		.search-list {
			font-size: 26rpx;
			color: #666;
			background-color: #eee;
			display: inline-block;
			padding: 10rpx 20rpx;
			border-radius: 8rpx;
		}
	}
</style>